<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>新闻详情</title>
		<link rel="stylesheet" href="../../css/media.css" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/swiper.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
	</head>
	<style>
		body{
		}
		.tab{
			width: 6.6rem;
			height: .88rem;
			float: left;
		}
		.tab .item{
			width: 20%;
			height: .88rem;
			line-height: .88rem;
			text-align: center;
			font-size: .32rem;
			color: #666666;
			float: left;
			box-sizing: border-box;
		}
		.active{
			color: #2593FF;
			border-bottom: 2px solid #2593FF;
		}
		.add{
			width: .56rem;
			height: .56rem;
			text-align: center;
			line-height: .56rem;
			font-size: .48rem;
			background: #2593FF;
			color: #ffffff;
			float: right;
			margin-top: .18rem;
			margin-right: .28rem;
		}
		.banner{
			width: 100%;
			height: 4rem;
			clear: both;
		}
		.onePart .item{
			width: 100%;
			height: 2.48rem;
			border-bottom: 1px solid #E5E5E5;
		}
		.onePart .item:last-child{
			border: 0;
		}
		.onePart .item .leftPart{
			float: left;
			width: 1.8rem;
			height: 1.8rem;
			margin-top: .34rem;
			margin-bottom: .34rem;
			margin-left: .28rem;
		}
		.rightPart{
			float: left;
			width: 4.5rem;
			margin-top: .34rem;
			margin-left: .5rem;
			position: relative;
		}
		.rightPart p{
			/*margin-bottom: .05rem;*/
		}
		.rightPart>p:first-child{
			font-size: .36rem;
			margin-bottom: .52rem;
		}
		.rightPart .text-right{
			font-size: .24rem;
			color: #999;
			text-align: right;
		}
		.rightPart .bottom p.thumbs{
			right: 0;
		}
		.bottom{
			font-size: .24rem;
			color: #999;
			position: relative;
		}
		.bottom p.thumbs{
			position: absolute;
			right:.28rem;
			bottom: 0;
		}
		.secondPart,.thirdPart{
			background: #F9F9F9;
			padding-top: .2rem;
			padding-bottom: .2rem;
		}
		.secondPart .content{
			background: #ffffff;
			padding-bottom: .2rem;
			
		}
		.secondPart .content .title{
			font-size: .32rem;
			color: #333333;
			font-weight: bold;
			margin-left: .28rem;
			padding-top: .28rem;
    		padding-bottom: .28rem;
    		font-family:'Lucida Grande', 'Trebuchet MS', Arial, Sans-Serif;
		}
		.secondPart .content .desc{
			clear: both;
			color: #999999;
			margin-left: .28rem;
			margin-top: .22rem;
			font-size: .28rem;
		}
		.newsImages{
			width: 100%;
			height: 1.5rem;
		}
		.newsImages img{
			width: 2.16rem;
			height: 1.46rem;
			display: block;
			float: left;
			border-radius: .12rem;
			margin-right: .22rem;
		}
		.newsImages img:first-child{
			margin-left: .3rem;
		}
		.desc span{
			font-size: .24rem;
		}
		.newsImg{
			width: 100%;
			height: 4.2rem;
		}
		.newsImg video,.newsImg img{
			width: 6.92rem;
			height: 4.2rem;
			margin-top: .24rem;
			margin-left: .3rem;
		}
		.swiper-container-horizontal>.swiper-pagination-bullets{
			width:100%;
			height: .62rem;
			bottom: 0;
			background:rgba(0,0,0,0.5);
			text-align: right;
			line-height: .1rem;
		}
		.swiper-container-horizontal>.swiper-pagination-bullets:before{
			content: '头条要闻';
			left:.34rem;
			color: #fff;
			font-size: .28rem;
			line-height: .62rem;
			position: absolute;
			z-index: 11;
		}
		.banner .tit{
			position: absolute;
			bottom: 0;
			line-height: .62rem;
			left:.34rem;
			color: #fff;
			font-size: .28rem;
			width:100%;
			height: .62rem;
			background:rgba(0,0,0,0.5);
		}
		.swiper-pagination-bullet{
			background: #939393;
			opacity: 1;
		}
		.swiper-pagination-bullet-active{
			background: #2CA6E0;
		}
	</style>
	<body>
		<div class="top">
			<div class="tab">
				<div onclick='tabClick(this)' class="item active">头条</div>
				<div onclick='tabClick(this)' class="item">要闻</div>
				<div onclick='tabClick(this)' class="item">部门</div>
				<div onclick='tabClick(this)' class="item">街镇</div>
				<div onclick='tabClick(this)' class="item">平台</div>
			</div>
			<div class="add" onclick="addColumn()">+</div>
		</div>
		<div class="swiper-container banner">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="javascript:void(0);"><img src="../../img/hot_banner.png"/>
					<!--<div class="tit">头条要闻</div>-->
					</a>
				</div>
				<div class="swiper-slide">
					<a href="javascript:void(0);"><img src="../../img/hot_banner.png"/></a>
				</div>
				<div class="swiper-slide">
					<a href="javascript:void(0);"><img src="../../img/hot_banner.png"/></a>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="onePart">
			<div class="item" onclick="detailPage()">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<div class="bottom">
						<p class="name">江北街道</p>
						<p class="thumbs">
							<i class="iconfont icon-tuijian-"></i>
							11224
						</p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<div class="bottom">
						<p class="name">江北街道</p>
						<p class="thumbs">
							<i class="iconfont icon-tuijian-"></i>
							11224
						</p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<div class="bottom">
						<p class="name">江北街道</p>
						<p class="thumbs">
							<i class="iconfont icon-tuijian-"></i>
							11224
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="secondPart">
			<div class="content">
				<p class="title">读图新闻|博物馆奇妙夜</p>
				<div class="newsImages">
					<img src="../../img/list_img2.png" />
					<img src="../../img/list_img2.png" />
					<img src="../../img/list_img2.png" />
				</div>
				<div class="bottom desc">
					<p class="name">江北街道</p>
					<p class="thumbs">
						<i class="iconfont icon-tuijian-"></i>
						11224
					</p>
				</div>
				<!--<p class="desc">新华日报   	&nbsp;&nbsp;<span>2018-05-18</span></p>-->
			</div>
		</div>
		<div class="secondPart">
			<div class="content">
				<p class="title">读图新闻|博物馆奇妙夜</p>
				<div class="newsImg">
					<video  id="vedio" type="video/ogg" onclick="paly(this)" playsinline src="https://pic.ibaotu.com/00/07/52/236888piC8Nn.mp4_10s.mp4" preload="auto" poster="../../img/hot_img3.png"> 
						<!--<source   />-->
					</video>
					<!--<img src="../../img/hot_img3.png" />-->
				</div>
				<div class="bottom desc">
					<p class="name">江北街道</p>
					<p class="thumbs">
						<i class="iconfont icon-tuijian-"></i>
						11224
					</p>
				</div>
				<!--<p class="desc">新华日报   	&nbsp;&nbsp;<span>2018-05-18</span></p>-->
			</div>
		</div>
		<div class="onePart">
			<div class="item" onclick="detailPage()">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<p class="text-right">江北街道</p>
				</div>
			</div>
			<div class="item">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<div class="bottom">
						<p class="name">江北街道</p>
						<p class="text-right">江北街道</p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="leftPart">
					<img src="../../img/list_img.png"/>
				</div>
				<div class="rightPart">
					<p>蔡英文不满意度达7成,前国民党官员细数其猪队友</p>
					<div class="bottom">
						<p class="name">江北街道</p>
						<p class="text-right">江北街道</p>
					</div>
				</div>
			</div>
		</div>
		<div class="secondPart">
			<div class="content">
				<p class="title">读图新闻|博物馆奇妙夜</p>
				<div class="newsImages">
					<img src="../../img/list_img2.png" />
					<img src="../../img/list_img2.png" />
					<img src="../../img/list_img2.png" />
				</div>
				<div class="bottom desc">
					<p class="name">江北街道</p>
					<p class="thumbs">
						<i class="iconfont icon-tuijian-"></i>
						11224
					</p>
				</div>
				<!--<p class="desc">新华日报   	&nbsp;&nbsp;<span>2018-05-18</span></p>-->
			</div>
		</div>
		<div class="secondPart">
			<div class="content">
				<p class="title">秦岭最美是商洛</p>
				<div class="newsImg">
					<video  id="vedio" type="video/ogg" onclick="paly(this)" playsinline src="https://pic.ibaotu.com/00/07/52/236888piC8Nn.mp4_10s.mp4" preload="auto" poster="../../img/hot_img3.png"> 
						<!--<source   />-->
					</video>
					<!--<img src="../../img/hot_img3.png" />-->
				</div>
				<div class="bottom desc">
					<p class="name">江北街道</p>
					<p class="thumbs">
						<i class="iconfont icon-tuijian-"></i>
						11224
					</p>
				</div>
				<!--<p class="desc">新华日报   	&nbsp;&nbsp;<span>2018-05-18</span></p>-->
			</div>
		</div>
	</body>
	<script src="../../js/jquery.min.js"></script>
	<script src="../../js/swiper.min.js"></script>
	<!--<script src="../../js/main.min.js"></script>-->
	<script type="text/javascript">
		function tabClick(tab){
			$(".tab .item").removeClass('active');
			$(tab).addClass('active');
		}
		function addColumn(){
			location.href = 'addColumn.html';
		}
		function detailPage(){
			location.href = 'detail.html';
		}
		function play(){
			playNum++;
			playNum % 2 == 1? $('video').trigger('play') : $('video').trigger('pause')
		}
		var mySwiper = new Swiper('.swiper-container', {
//			autoplay: true,//可选选项，自动滑动
			pagination: {
				el: '.swiper-pagination',
			},
		})  
		function paly(video){
			if(video.paused) {
		        video.play();
		    }else{
		        video.pause();
		    }
		}
	</script>
</html>
